<template>
	<view class="new-pro">
		<view :class="['new-pro-scroll-view',{'less': list.length < 5}]" scroll-x>
			<view class="new-pro-item" v-for="(data,index) in list" :key="index" @click="goProInfo(data.goods_id)">
				<view class="index" v-if="showIndex" :class="{bg1:index==0,bg2:index==1,bg3:index==2}">
					<view class="no">NO.</view>
					<view class="num">{{index+1}}</view>
				</view>
				<image :src="data.image_middle || data.image" mode="aspectFill"></image>
				<view class="new-pro-item-tit">{{data.goods_name}}</view>
				<view class="new-pro-item-price" v-if="isLogin">￥<text>{{data.retail_price}}</text></view>
				<view class="noLogin" v-else>登录查看会员价</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			showIndex: {
				type: Boolean,
				default: false
			},
			isLogin: {
				type: Boolean,
				default: false
			},
			list: {
				type: Array,
				default () {
					return []
				}
			}
		},
		data() {
			return {
				
			};
		},
		methods: {
			goProInfo(goods_id){
				getApp().goProInfo(goods_id)
			}
		}
	}
</script>

<style lang="scss">
	.new-pro{
		padding: 0 30rpx;
	}
	.new-pro-scroll-view{
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		height: 920rpx;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		.new-pro-item{
			display: inline-block;
			width: 300rpx;
			height: 460rpx;
			margin-right: 30rpx;
			position: relative;
			.index{
				position: absolute;
				top: -2rpx;
				left: 0;
				width: 66rpx;
				height: 71rpx;
				z-index: 1;
				display: flex;
				align-items: center;
				justify-content: center;
				font-family: 'din';
				font-weight: bold;
				background-image: url('https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/static/images/other/2022-03-15/20220315/67e08f1fd81667f29147e464e88c6db0.png');
				background-size: cover;
				color: #141414;
				.no{
					font-size: 24rpx;
					line-height: 24rpx;
					margin-top: -8rpx;
					/* #ifdef H5 */
					transform: scale(.8);
					/* #endif */
				}
				.num{
					margin-top: -8rpx;
					/* #ifdef H5 */
					transform: scale(.9);
					margin-left: -6rpx;
					/* #endif */
				}
				&.bg1{
					background-image: url('https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/static/images/other/2022-03-15/20220315/7954ce3f84f4b101ef55bff9f61c0235.png');
					background-size: cover;
					color: #624215;
				}
				&.bg2{
					background-image: url('https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/static/images/other/2022-03-15/20220315/fa94a7907543188ca31a09dc54404c4d.png');
					background-size: cover;
					color: #282C3A;
				}
				&.bg3{
					background-image: url('https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/static/images/other/2022-03-15/20220315/2239163aa285c09e417298e0137473c5.png');
					background-size: cover;
					color: #331D11;
				}
			}
			image{
				width: 300rpx;
				height: 300rpx;
				border-radius: 16rpx;
			}
			.new-pro-item-tit{
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				margin: 20rpx 0;
				text-align: center;
				font-size: 24rpx;
			}
			.new-pro-item-price{
				color: #F59359;
				font-size: 24rpx;
				text-align: center;
				font-family: 'din';
				text{
					font-size: 32rpx;
				}
			}
			.noLogin{
				display: inline-block;
				background-color: #F59359;
				color: #FFF;
				border-radius: 10rpx;
				padding: 6rpx 12rpx;
				font-size: 20rpx;
			}
		}
		&.less{
			height: auto;
			flex-direction: row;
			justify-content: space-between;
			.new-pro-item{
				width: calc((100% - 30rpx) / 2);
				image{
					width: 100%;
				}
				&:nth-child(2n){
					margin-right: 0;
				}
			}
		}
	}
</style>